<template>
  <div class="container">
    <el-card
      class="work-card"
      shadow="never"
    >
      <el-button
        type="warning"
        class="add-btn"
        @click="addWorkPattern"
      >
        添加工作模式
      </el-button>
      <el-table :data="list">
        <el-table-column
          min-width="50px"
          label="工作模式编号"
          prop="id"
        >
        </el-table-column>
        <el-table-column
          width="150px"
          label="工作模式"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          width="150px"
          label="类型"
          prop="workPatternType"
        >
          <template v-slot="{row}">
            <span v-if="row.workPatternType===1">礼拜制</span>
            <span v-if="row.workPatternType===2">连续制</span>
          </template>
        </el-table-column>
        <el-table-column
          label="工作日期"
          prop="workDate"
        >
        </el-table-column>
        <el-table-column
          label="工作时间"
          prop="Minute"
        >
          <!-- {{ item.minute }} -->
        </el-table-column>
        <el-table-column
          label="操作"
          width="150px"
          align="center"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              @click="editWorkPattern(row.id)"
            >
              编辑
            </el-button>
            <span style="padding:0 5px; color:rgba(220, 223, 230) ">|</span>
            <el-popconfirm
              title="确定要删除吗"
              @onConfirm="confirmAction(row.id)"
            >
              <template v-slot:reference>
                <el-button
                  type="text"
                  class="del-text-btn"
                >
                  <!-- @click="delBtn(id)" -->
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="pages">
          <el-row
            type="flex"
            justify="center"
          >
            <el-pagination
              :current-page="Number(queryParams.page)"
              :total="Number(total)"
              :page-size="Number(queryParams.pageSize)"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="pageChange"
              @size-change="SizeChange"
            ></el-pagination>
          </el-row>
        </div>
      </div>
    </el-card>
    <!-- ================================================================ -->
    <!-- 新增工作模式 -->
    <!-- :before-close="handleClose" -->
    <el-dialog
      title="新增工作模式"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <!-- :default-active="activeIndex" -->
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        :default-active="activeForm"
        @select="handleSelect"
      >
        <el-menu-item index="1">礼拜制</el-menu-item>
        <el-menu-item index="2">连续制</el-menu-item>
      </el-menu>
      <div class="line"></div>
      <!-- form表单=================================================== -->
      <el-form
        ref="workAddForm"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="工作模式名称"
          prop="name"
        >
          <el-input v-model="form.name" />
        </el-form-item>

        <!-- prop="type" -->
        <el-form-item
          v-if="selectForm===1"
          label="连续工作天数"
        >
          <!-- <el-checkbox-group v-model="form.checkboxGroup"> -->
          <el-checkbox
            v-model="form.monday"
            label="1"
          >周一</el-checkbox>
          <el-checkbox
            v-model="form.tuesday"
            label="2"
          >周二</el-checkbox>
          <el-checkbox
            v-model="form.wednesday"
            label="3"
          >周三</el-checkbox>
          <el-checkbox
            v-model="form.thursday"
            label="4"
          >周四</el-checkbox>
          <el-checkbox
            v-model="form.friday"
            label="5"
          >周五</el-checkbox>
          <el-checkbox
            v-model="form.saturday"
            label="6"
          >周六</el-checkbox>
          <el-checkbox
            v-model="form.sunday"
            label="7"
          >周日</el-checkbox>
        <!-- </el-checkbox-group> -->
        </el-form-item>
        <el-form-item
          v-if="selectForm===2"
          label="连续工作天数"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item prop="workDayNum">
                <el-input v-model="form.workDayNum" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="restDayNum">
                <el-input v-model="form.restDayNum" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item
          label="工作时间"
          required
        >
          <el-row>
            <el-col :span="10">
              <el-form-item prop="workStartMinute1">
                <el-time-picker
                  v-model="form.workStartMinute1"
                  placeholder="开始时间"
                  style="width: 50%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="workEndMinute1">
                <el-time-picker
                  v-model="form.workEndMinute1"
                  placeholder="结束时间"
                  style="width: 50%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <!-- <el-form
        v-if="selectForm === 2"
        ref="workAddForm2"
        :model="form"
        :rules="rules2"
      >
        <el-form-item
          label="工作模式名称"
          prop="name"
        >
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item
          label="连续工作天数"
          width="200px"
          :inline="true"
        >
          <el-col :span="10">
            <el-form-item prop="workDayNum">
              <el-input v-model="form.workDayNum" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="restDayNum">
              <el-input v-model="form.restDayNum" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="工作时间"
          required
        >
          <el-row>
            <el-col :span="10">
              <el-form-item prop="workStartMinute1">
                <el-time-picker
                  v-model="form.workStartMinute1"
                  placeholder="开始时间"
                  style="width: 50%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="workEndMinute1">
                <el-time-picker
                  v-model="form.workEndMinute1"
                  placeholder="结束时间"
                  style="width: 50%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form> -->
      <el-row
        type="flex"
        justify="center"
      >
        <el-button
          type="primary"
          @click="addWorkPatternOk"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, addWorkHistory, updateWorkHistory, workHistoryInfo, deleteWorkHistory } from '@/api/transit'
export default {
  data() {
    return {
      list: [],
      queryParams: {
        page: 1,
        pageSize: 10
      },
      total: null,
      dialogVisible: false,
      form: {
        isEdit: null,
        checked: false,
        checkList: ['选中且禁用'],
        creater: 0,
        friday: null,
        id: 0,
        isDelete: true,
        monday: null,
        name: '',
        restDayNum: '',
        saturday: null,
        status: '',
        sunday: null,
        thursday: null,
        tuesday: null,
        updater: 0,
        userType: '',
        wednesday: null,
        workDate: '',
        workDayNum: '',
        workEndMinute1: 0,
        workPatternType: '',
        workPatternTypeDesc: '',
        workStartMinute1: 0,
        // type: []
        checkboxGroup: [],
        radio: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        workDayNum: [
          { required: true, message: '需要填写工作天数', trigger: 'blur' }
        ],
        restDayNum: [
          { required: true, message: '需要填写休息天数', trigger: 'blur' }
        ],
        workStartMinute1: [
          { type: 'date', required: true, message: '必须填写开始时间', trigger: 'change' }
        ],
        workEndMinute1: [
          { type: 'date', required: true, message: '必须填写时间', trigger: 'change' }
        ]
      },
      activeForm: '1',
      selectForm: 1,
      showConfrim: false,
      formData: {
        radioGroup: ''
      },
      radioOptions: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
        { label: '关闭', value: '' } // 添加一个关闭选项
      ]
    }
  },
  computed: {

  },
  created() {
    this.workHistoryList()
  },
  methods: {
    async workHistoryList() {
      const res = await workHistoryList(this.queryParams)
      this.list = res.data.items
      // 拿到每一项的工作开始分钟和工作结束分钟
      this.list.map(item => ({ ...item, Minute: (this.$set(item, 'Minute', Number((item.workEndMinute1 - item.workStartMinute1) / 60).toFixed(2) + '小时')) }))
      // 分页
      this.total = res.data.counts
      this.$set(this.form, 'isEdit', false)
    },
    pageChange(page) {
      this.queryParams.page = page
      this.workHistoryList()
    },
    SizeChange(size) {
      this.queryParams.pageSize = size
      this.workHistoryList()
    },
    addWorkPattern() {
      this.dialogVisible = true
      this.form.isEdit = 1
      this.delDateWeek()
    },
    handleSelect(key) {
      if (key === '1') {
        this.selectForm = 1
        this.form.workPatternType = '1'
      }
      if (key === '2') {
        this.selectForm = 2
        this.form.workPatternType = '2'
        this.delDateWeek()
      }
    },
    // 将表单拿到的时间数据转换为分钟
    transDateToMinutes() {
      const dateString1 = this.form.workEndMinute1
      const dateString2 = this.form.workStartMinute1
      const date1 = new Date(dateString1)
      const date2 = new Date(dateString2)
      const minutes1 = Math.floor(date1.getTime() / (1000 * 60))
      const minutes2 = Math.floor(date2.getTime() / (1000 * 60))
      this.form.workEndMinute1 = minutes1
      this.form.workStartMinute1 = minutes2
    },
    // 清空星期数据
    delDateWeek() {
      this.form.monday = ''
      this.form.tuesday = ''
      this.form.wednesday = ''
      this.form.thursday = ''
      this.form.friday = ''
      this.form.saturday = ''
      this.form.sunday = ''
    },
    getDateWeek() {
      // this.form.monday === true ? this.form.monday = '1' : this.form.monday = '2'
      if (this.form.monday === true) {
        this.form.monday = '1'
        // throw new Error('123')
      } else if (this.form.monday === false) {
        this.form.monday = '2'
      } else {
        this.form.monday = '0'
      }
      if (this.form.tuesday === true) {
        this.form.tuesday = '1'
        // throw new Error('123')
      } else if (this.form.tuesday === false) {
        this.form.tuesday = '2'
      } else {
        this.form.tuesday = '0'
      }
      if (this.form.wednesday === true) {
        this.form.wednesday = '1'
      } else if (this.form.thursday === false) {
        this.form.wednesday = '2'
      } else {
        this.form.wednesday = '0'
      }
      if (this.form.thursday === true) {
        this.form.thursday = '1'
      } else if (this.form.thursday === false) {
        this.form.thursday = '2'
      } else {
        this.form.thursday = '0'
      }
      if (this.form.friday === true) {
        this.form.friday = '1'
      } else if (this.form.friday === false) {
        this.form.friday = '2'
      } else {
        this.form.friday = '0'
      }
      if (this.form.saturday === true) {
        this.form.saturday = '1'
      } else if (this.form.saturday === false) {
        this.form.saturday = '2'
      } else {
        this.form.saturday = '0'
      }
      if (this.form.sunday === true) {
        this.form.sunday = '1'
      } else if (this.form.sunday === false) {
        this.form.sunday = '2'
      } else {
        this.form.sunday = '0'
      }
    },
    transNumWeek() {
      this.form.monday === 1 ? this.form.monday = true : this.form.monday = false
      this.form.tuesday === 1 ? this.form.tuesday = true : this.form.tuesday = false
      this.form.wednesday === 1 ? this.form.wednesday = true : this.form.wednesday = false
      this.form.thursday === 1 ? this.form.thursday = true : this.form.thursday = false
      this.form.friday === 1 ? this.form.friday = true : this.form.friday = false
      this.form.saturday === 1 ? this.form.saturday = true : this.form.saturday = false
      this.form.sunday === 1 ? this.form.sunday = true : this.form.sunday = false
    },
    closeAddPattern() {
      this.dialogVisible = false
      this.workHistoryList()
      this.$refs.workAddForm.resetFields()
    },
    // =============================直接用 v-if切换表单不就行了 所有功能完成后改， 脑袋瓦特了=========================
    async addWorkPatternOk() {
      this.getDateWeek()
      this.transDateToMinutes()
      this.form.workPatternType = '1'
      if (this.form.isEdit === 1) {
        if (this.selectForm === 1) {
          this.$refs.workAddForm.validate(async(isOk) => {
            if (isOk) {
              try {
                await addWorkHistory(this.form)
                this.$message.success('成功添加模式')
                this.closeAddPattern()
              } catch (err) {
                console.log(err)
              }
            } else {
              console.log(123)
            }
          })
        }
        if (this.selectForm === 2) {
          this.form.workPatternType = '2'
          this.$refs.workAddForm.validate(async(isOk) => {
            if (isOk) {
              try {
                await addWorkHistory(this.form)
                this.$message.success('成功添加模式')
                this.closeAddPattern()
                this.$refs.workAddForm.resetFields()
              } catch (err) {
                console.log(err)
              }
            } else {
              console.log(123)
            }
          })
        }
      } else {
        this.editWorkPatternOk()
        this.$message.success('编辑成功')
        await updateWorkHistory(this.form)
        this.closeAddPattern()
        this.$message.success('成功编辑')
        this.$refs.workAddForm.resetFields()
      }
      // this.$nextTick(this.delDateWeek())
    },
    async editWorkPattern(id) {
      this.dialogVisible = true
      this.form.isEdit = 2
      this.form.id = id
      const res = await workHistoryInfo(id)
      if (res.data.workPatternType === 1) {
        this.selectForm = 1
        this.activeForm = '1'
      } else if (res.data.workPatternType === 2) {
        this.selectForm = 2
        this.activeForm = '2'
      } else {
        console.log('没有工作模式')
      }
      this.form = res.data
      this.transNumWeek()
    },
    async editWorkPatternOk() {

    },
    async confirmAction(id) {
      await deleteWorkHistory(id)
      if (this.list.length === 1 && this.queryParams.page > 1) {
        this.queryParams.page--
      }
      this.workHistoryList()
      this.$message.success('删除角色成功')
    },
    change() {
      this.monday = ''
    },
    handleClose() {
      this.$refs.workAddForm.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
  .work-card {
    margin: 20px;
    .add-btn {
      padding-left: 7px;
      margin: 15px 0;
    }
    .del-text-btn {
      color: rgb(247, 137, 137)
    }
  }
</style>
